<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>校园闲置－用户注册</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
	</head>
	<body>
		<form  method="post" id="register-from" action="" enctype="multipart/form-data">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">会员注册</div>
					<div class="right fr"><a href="index" target="_self">校园闲置商品交易平台</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div style="text-align:center;color:red;">提示：输入完成请移开指针进行校验</div>
				<div class="regist_main center">
					<div class="username head-img-div">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像:
						<div class="head-div">
							<input type="file" name="userhead" class="user-head-file" accept="image/jpeg,image/png,image/jpg" />
							<img class="user-head-img" src="/csht_file/user_header/avater.jpg">
						</div>
						<span>请上传不超过256*256的图片</span>
					</div>
					<div class="username">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
						<input type="radio" name="userGender" class="gender" checked value="男" />男
						<input type="radio" name="userGender" class="gender" value="女" />女
					</div>
					<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;
						<input type="text" name="userUsername" id="userUsername" class="shurukuang" placeholder="请输入你的用户名" required />
						<span></span>
					</div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;
						<input type="password" name="userPassword" id="userPassword" class="shurukuang" placeholder="请输入你的密码" required />
						<span></span>
					</div>
					<div class="username">确认密码:&nbsp;&nbsp;
						<input class="shurukuang" type="password" name="repassword" id="repassword" placeholder="请确认你的密码" required />
						<span></span>
					</div>
					<div class="username">学校地址:&nbsp;&nbsp;
						<select name="province" id="province" required>
							<option value="0">请选择</option>
							<c:forEach items="${provinceList}" var="provinceList">
								<option value="${provinceList.id}">${provinceList.name}</option>
							</c:forEach>
						</select>
						<select name="city" id="city" required></select>
						<select name="school" id="school" required></select>
						<input type="hidden" name="userAddress" id="userAddress" />
						<span></span>
					</div>
					<div class="username">Q&nbsp;&nbsp;&nbsp;Q&nbsp;&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input type="number" name="userqq" id="userqq" class="shurukuang" placeholder="请输入你的QQ号"/>
						<span class="qqtishi">可填(不填则对交易联系有影响)</span>
					</div>
					<div class="username">微&nbsp;&nbsp;信&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input type="text" name="userWechat" id="userWechat" class="shurukuang" placeholder="请输入你的微信号" />
						<span class="wechattishi">可填(不填则对交易联系有影响)</span>
					</div>
					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input type="tel" name="userTel" id="userTel" class="shurukuang" required placeholder="请填写正确的手机号" />
						<span></span>
					</div>
					<div class="username">
						<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;
							<input class="yanzhengma" type="text" name="code" id="code" required placeholder="请输入手机验证码" autocomplete="off" />
							<button type="button" class="getCode" id="getCode">获取验证码</button>
						</div>
						<span></span>
						<div class="clear"></div>
					</div>
				</div>
				<div class="regist_submit">
					<input class="submit" type="button" id="submitbtn" name="submitbtn" value="立即注册" >
				</div>
				
                <div class="regToBack"><a href="login"><i class="glyphicon glyphicon-arrow-left"></i>返回登录页面</a></div>
                
			</div>
		</div>
		</form>
	</body>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.metadata.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//注册成功提示
			if("${message}" == "成功"){
				layer.open({
					  content: '注册成功',
					  title: '提示:',
					  icon: 1,
					  anim: 6,
					  yes: function(index, layero){
						  layer.close(index); //如果设定了yes回调，需进行手工关闭
						  location.href = "login";
						  }
				});
			};
			
			var usernameBooean = false; //记录用户名是否通过校验
			var passwordBooean = false; //记录密码是否通过校验
			var repasswordBooean = false; //记录确认密码是否通过校验
			var schoolAddressBooean = false; //记录学校地址是否通过校验
			var telBooean = false; //记录手机号是否通过校验
			var codeBooean = false; //记录验证码是否通过校验
			var telCode = 0; //保存验证码
			
			//用户名校验
			$("#userUsername").change(function(){
				var usernameval = $("#userUsername").val();
				var regExp = new RegExp("[ `~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】‘；：”“'。，、？]");
				if(regExp.test(usernameval)){ //用户名不能包含特殊符号
					$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>用户名不能包含特殊符号");
					usernameBooean = false;
					console.log("用户名校验不通过" + usernameBooean);
				}else if(usernameval.length < 3 || usernameval.length > 12){ //用户名长度3－12位
					$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>用户名长度为3－12个字符");
					usernameBooean = false;
					console.log("用户名校验不通过" + usernameBooean);
				}else{
					var regExp = new RegExp("^1[3|4|5|7|8][0-9]{9}$");
					if(regExp.test(usernameval)){
						$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>用户名不能是手机号码格式");
						usernameBooean = false;
						console.log("用户名校验不通过" + telBooean);
						return;
					}
					$("#userUsername").siblings("span").html("<img src='${pageContext.request.contextPath}/static/image/loading.gif'>" + 
					"<i style='color:green;font-weight:normal;font-style:normal;'>检测中...</i>");
					$.ajax({
						url: "${pageContext.request.contextPath}/checkUsername",
						type: "POST",
						dataType: "json",
						data: {
							"username": usernameval,
						},
						success: function(data){
							if(true == data.res){
								$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
								usernameBooean = true;
								console.log("用户名校验通过" + usernameBooean);
							}else{
								$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>该用户名已被注册");
								usernameBooean = false;
								console.log("用户名校验不通过" + usernameBooean);
							}
						}
					})
				}
			});
			
			//密码校验
			$("#userPassword").blur(function(){
				var passwordval = $("#userPassword").val();
				if(passwordval.length < 6 || passwordval.length > 16){
					$("#userPassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>密码长度为6－16位字符");
					passwordBooean = false;
					console.log("密码校验不通过" + passwordBooean);
				}else{
					$("#userPassword").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
					passwordBooean = true;
					console.log("密码校验通过" + passwordBooean);
					//这里也进行确认密码校验
					var repasswordval = $("#repassword").val();
					if(repasswordval == "" || repasswordval == null){
						$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>不能为空");
						repasswordBooean = false;
						console.log("确认密码校验不通过" + repasswordBooean);
						return;
					}
					if(repasswordval != passwordval){
						$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>两次密码输入不一致");
						repasswordBooean = false;
						console.log("确认密码校验不通过" + repasswordBooean);
					}else{
						$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
						repasswordBooean = true;
						console.log("确认密码校验通过" + repasswordBooean);
					}
				}
			});
			
			//确认密码校验
			$("#repassword").blur(function(){
				var repasswordval = $("#repassword").val();
				var passwordval = $("#userPassword").val();
				if(repasswordval == "" || repasswordval == null){
					$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>不能为空");
					repasswordBooean = false;
					console.log("确认密码校验不通过" + repasswordBooean);
					return;
				}
				if(repasswordval != passwordval){
					$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>两次密码输入不一致");
					repasswordBooean = false;
					console.log("确认密码校验不通过" + repasswordBooean);
				}else{
					$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
					repasswordBooean = true;
					console.log("确认密码校验通过" + repasswordBooean);
				}
			});
			
			//学校地址校验
			$("#school").change(function(){
				var schoolAddressval = $("#school").val();
				if(schoolAddressval == 0 ||schoolAddressval == null || schoolAddressval == ""){
					$("#school").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请选择学校地址");
					schoolAddressBooean = false;
					console.log("学校地址校验不通过" + schoolAddressBooean);
				}else{
					$("#school").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
					//给地址隐藏域赋值
					var provincevalId = $("#province").val(); //获取省的值(值为省id)
					var provinceval = $("#province option[value=" + provincevalId + "]").text();
					var cityval = $("#city").val(); //获取市的值
					$("#userAddress").val(provinceval + "-" + cityval + "-" + schoolAddressval); //按格式连接给地址隐藏域赋值
					schoolAddressBooean = true;
					console.log("学校地址校验通过" + schoolAddressBooean);
				}
			});
			
			//手机号校验
			$("#userTel").blur(function(){
				var telval = $("#userTel").val();
				var regExp = new RegExp("^1[3|4|5|7|8][0-9]{9}$");
				if(!regExp.test(telval)){
					$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
					telBooean = false;
					console.log("手机号校验不通过" + telBooean);
				}else{
					$("#userTel").siblings("span").html("<img src='${pageContext.request.contextPath}/static/image/loading.gif'>" + 
					"<i style='color:green;font-weight:normal;font-style:normal;'>检测中...</i>");
					//校验手机号有没有被注册
					$.ajax({
						url: "${pageContext.request.contextPath}/checkUserTel",
						type: "POST",
						dataType: "json",
						data: {
							"userTel": telval,
						},
						success: function(data){
							if(true == data.bool){
								$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
								telBooean = true;
								console.log("手机号校验通过" + telBooean);
							}else{
								$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>该手机号已被注册");
								telBooean = false;
								console.log("手机号校验不通过" + telBooean);
							}
						}
					})
					
				}
			});
			
			//点击获取验证码按键
			$("#getCode").on("click", function(){
				var telval = $("#userTel").val();
				var regExp = new RegExp("^1[3|4|5|7|8][0-9]{9}$");
				if(!regExp.test(telval)){
					$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
					telBooean = false;
					console.log("手机号校验不通过" + telBooean);
				}else{
					//校验手机是否已通过校验
					if(telBooean == false){
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
						return;
					}
					
					//按钮一分钟内不能再次点击
					$("#getCode").attr("disabled", "disabled");
					var time = 60; //60s
					var setitv = setInterval(setitvfun, 1000);
					function setitvfun(){
						time--;
						$("#getCode").text(time + "S");
						if(time == 0){
							clearInterval(setitv);
							$("#getCode").removeAttr("disabled");
							$("#getCode").text("获取验证码");
						}
					}
					
					//手机号校验通过时进行发送短信
					$.ajax({
						url: "${pageContext.request.contextPath}/getCode",
						type: "POST",
						dataType: "json",
						data: {
							"telval": telval,
							"getCodeType": "register",
						},
						success: function(data){
							if(true == data.bool){
								telCode = data.telCode;
								$("#getCode").parent().siblings("span").html("<i style='color:green;font-style:normal'>验证码已发至手机，请注意查收</i>");
							}else{
								if(data.telCode == "00141"){
									layer.alert("一小时内只能发送4条验证码", {icon: 2,anim: 0});
								}else{
									layer.alert("请联系客服，错误状态码为：" + data.telCode, {icon: 2,anim: 0});
								}
							}
						}
					})
				}
			});
			
			//验证码校验
			$("#code").blur(function(){
				var codeval = $("#code").val();
				if(telCode == 0){
					$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请点击获取验证码");
					codeBooean = false;
					console.log("请先获取验证码" + codeBooean);
				}else{
					if(telCode == codeval){
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
						codeBooean = true;
						console.log("验证码校验通过" + codeBooean);
					}else{
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>验证码不正确");
						codeBooean = false;
						console.log("验证码校验不通过" + codeBooean);
					}
				}
			});
			
			//点击注册
			$("#submitbtn").on("click", function(){
				//校验全部通过
				if(usernameBooean && passwordBooean && repasswordBooean && schoolAddressBooean && telBooean && codeBooean){
					$("#register-from").attr("action", "userReg");
					$("#register-from").submit();
				}else{
					if(!usernameBooean){
						$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请输入正确的用户名");
					}else if(!passwordBooean){
						$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请输入密码");
					}else if(!repasswordBooean){
						$("#repassword").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>两次密码输入不一致");
					}else if(!schoolAddressBooean){
						$("#school").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请选择学校地址");
					}else if(!telBooean){
						$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
					}else if(!codeBooean){
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>验证码不正确");
					}
				}
			});
			
			
			//根据省的什值变动来使用ajax获取城市
			$("#province").on("change", function(){
				$("#city").empty();
				$("#school").empty();
				//获取id
				var provinceId = $("#province").val();
				if(provinceId == 0){ //用户没有选择省
					return;
				}else{
					$.ajax({
						url: "${pageContext.request.contextPath}/getCity",
						type: "POST",
						dataType: "json",
						data: {
							"provinceId": provinceId,
						},
						success: function(data){
							var html = "";
							html += "<option value='0'>请选择</option>";
							for(var i in data.cityList){
								html += "<option value='" + data.cityList[i] + "'>" + data.cityList[i] + "</option>";
							};
							$("#city").html(html);
						}
					})
				}
			});
			
			//根据城市值变动来使用ajax获取学校
			$("#city").on("change", function(){
				$("#school").empty();
				//获取id
				var cityName = $("#city").val();
				
				if(cityName == 0){ //用户没有选择省
					return;
				}else{
					$.ajax({
						url: "${pageContext.request.contextPath}/getSchool",
						type: "POST",
						dataType: "json",
						data: {
							"cityName": cityName,
						},
						success: function(data){
							var html = "";
							html += "<option value='0'>请选择</option>";
							for(var i in data.schoolList){
								html += "<option value='" + data.schoolList[i].name + "'>" + data.schoolList[i].name + "</option>";
							};
							$("#school").html(html);
						}
					})
				}
			});
			
			//上传图片并预览
			$(".user-head-file").on("change", function(){
				var imgFile = this.files[0];//获取图片
				var img = $(this).siblings(".user-head-img");
				img.attr("src","${pageContext.request.contextPath}/static/userHeadImg/moren.png");//出始化图片预览
				if(imgFile.size > 1024 * 1024 * 10){
					alert('图片大小不能超过10M');
					$(this).val() = "";
					return;
				}else{
					var filereader = new FileReader();
					filereader.readAsDataURL(imgFile);//读取图片
					filereader.onload = function() {//读取完成时预览
						img.attr("src",filereader.result);
						};
					};
				})
		})
	</script>
</html>
